import React, { useState, useEffect } from "react";
import { Modal, Form, Input, Select } from 'antd';
import { roleList } from "@/common/api"

interface AddEditProps {
    visible: boolean;
    type: 'add' | 'edit';
    initialValues?: FormData;
    cancel: () => void;
    submit: (values: FormData) => void;
}

const AddCount: React.FC<AddEditProps> = ({ visible, type, cancel, submit, initialValues }) => {
    useEffect(() => {
        getRoles()
    }, []);
    const getRoles = () => {
        roleList().then((res: any) => {
            if (res.success) {
                let data = []
                for (let i in res.data) {
                    data.push({
                        label: res.data[i],
                        value: i
                    })
                }
                setRoleData(data)
            }
        })
    }
    const [form] = Form.useForm();
    const [roleData, setRoleData] = useState<any[]>([]);
    // 当编辑时设置默认值
    useEffect(() => {
        if (visible && initialValues) {
            console.log(initialValues, '111111111111')
            form.setFieldsValue(initialValues);
        }
    }, [visible, initialValues, form]);
    const Onsubmit = () => {
        const values = form.getFieldsValue();
        values['needYearMonth'] = values['needYearMonth'] ? values['needYearMonth'].format('YYYYMM') : ''
        submit(values)
    };
    return (
        <>
            <Modal
                title={type === 'edit' ? '编辑' : '新增'}
                open={visible}
                onOk={Onsubmit}
                onCancel={cancel}
                width="40vw"
            >
                <div>
                    <Form form={form} autoComplete="off" labelAlign="right" labelCol={{ style: { width: 100, textAlign: 'right' } }} >
                        <div style={{ display: 'flex', gap: '20px' }}>
                            <Form.Item name="userName" label="用户名 :" style={{ flex: 1 }}>
                                <Input placeholder="请输入用户名" />
                            </Form.Item>
                            <Form.Item name="department" label="部门:" style={{ flex: 1 }}>
                                <Input placeholder="请输入部门" />
                            </Form.Item>

                        </div>
                        <div style={{ display: 'flex', gap: '20px' }}>
                            <Form.Item name="userRole" label="角色:" style={{ flex: 1 }}>
                                <Select
                                    style={{ width: '100%' }}
                                    options={roleData}
                                    placeholder="请选择角色"
                                />
                            </Form.Item>
                            <Form.Item name="realName" label="真实姓名:" style={{ flex: 1 }}>
                                <Input placeholder="请输入真实姓名" />
                            </Form.Item>
                        </div>


                        <div style={{ display: 'flex', gap: '20px' }}>
                            <Form.Item name="userMail" label="电子邮件:" style={{ flex: 1 }}>
                                <Input placeholder="请输入电子邮件" />
                            </Form.Item>

                            <Form.Item name="phoneNumber" label="手机号:" style={{ flex: 1 }}>
                                <Input placeholder="请输入手机号" />
                            </Form.Item>
                        </div>
                    </Form>
                </div>

            </Modal >
        </>
    );
}


export default AddCount